<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片结果 - AI 画廊</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/tdesign-miniprogram@1.2.2/dist/style/index.wxss">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100vh;
            overflow-y: auto;
        }
        /* TDesign 风格模拟 */
        .t-header {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 500;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid #eee;
        }
        .t-header-back {
            position: absolute;
            left: 16px;
            display: flex;
            align-items: center;
        }
        .t-image-container {
            width: calc(100% - 32px);
            margin: 16px;
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            padding-bottom: 16px;
        }
        .t-image-preview {
            width: 100%;
            height: 360px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .t-image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .t-prompt-info {
            padding: 16px;
        }
        .t-prompt-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #333;
        }
        .t-prompt-text {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        .t-negative-prompt {
            font-size: 14px;
            color: #e53935;
            line-height: 1.5;
        }
        .t-button {
            width: calc(100% - 32px);
            height: 44px;
            margin: 16px;
            background-color: #0052d9;
            color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
        }
        .t-button.secondary {
            background-color: #fff;
            color: #0052d9;
            border: 1px solid #0052d9;
        }
        .t-action-bar {
            display: flex;
            justify-content: space-between;
            width: calc(100% - 32px);
            margin: 0 16px 16px 16px;
        }
        .t-action-bar .t-button {
            width: 48%;
            margin: 0;
        }
        .status-bar {
            height: 44px;
            background-color: #fff;
        }
        .t-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .t-loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0,82,217,0.1);
            border-left-color: #0052d9;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        .t-loading-text {
            color: #333;
            font-size: 16px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="status-bar"></div>
    <div class="t-header">
        <div class="t-header-back" onclick="goBack()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
            </svg>
        </div>
        图片结果
    </div>
    
    <div class="t-image-container">
        <div class="t-image-preview" id="imagePreview">
            <!-- 图片将在这里通过JS动态加载 -->
        </div>
        
        <div class="t-prompt-info">
            <div class="t-prompt-title">提示词</div>
            <div class="t-prompt-text" id="positivePromptText">加载中...</div>
            
            <div class="t-prompt-title" id="negativePromptTitle" style="display: none;">反面提示词</div>
            <div class="t-negative-prompt" id="negativePromptText" style="display: none;"></div>
        </div>
    </div>
    
    <div class="t-action-bar">
        <div class="t-button secondary" onclick="goBack()">重新生成</div>
        <div class="t-button" onclick="publishImage()">发布</div>
    </div>
    
    <!-- 加载中动画 -->
    <div class="t-loading" id="loading" style="display: none;">
        <div class="t-loading-spinner"></div>
        <div class="t-loading-text">正在发布...</div>
    </div>

    <script>
        // 页面加载时显示图片和提示词
        window.onload = function() {
            // 从localStorage获取数据
            const positivePrompt = localStorage.getItem('positivePrompt') || '未指定提示词';
            const negativePrompt = localStorage.getItem('negativePrompt') || '';
            const imageId = localStorage.getItem('imageId') || Math.floor(Math.random() * 1000);
            
            // 显示图片
            const imagePreview = document.getElementById('imagePreview');
            imagePreview.innerHTML = `<img src="https://picsum.photos/600/600?random=${imageId}" alt="AI生成图片">`;
            
            // 显示提示词
            document.getElementById('positivePromptText').textContent = positivePrompt;
            
            // 如果有反面提示词，则显示
            if (negativePrompt && negativePrompt.trim() !== '') {
                document.getElementById('negativePromptTitle').style.display = 'block';
                document.getElementById('negativePromptText').style.display = 'block';
                document.getElementById('negativePromptText').textContent = negativePrompt;
            }
        };
        
        // 返回上一页
        function goBack() {
            window.location.href = 'create.html';
        }
        
        // 发布图片
        function publishImage() {
            // 显示加载中
            document.getElementById('loading').style.display = 'flex';
            
            // 模拟发布过程（1秒后跳转）
            setTimeout(() => {
                // 发布成功，显示提示
                alert('发布成功！');
                
                // 隐藏加载中
                document.getElementById('loading').style.display = 'none';
                
                // 重定向到首页
                window.location.href = 'home.html';
            }, 1000);
        }
    </script>
</body>
</html> 